import string from './css.js'


const player = {
    id: undefined,
    time : 70,
    ui: {
         demo : document.querySelector('#demo'),
         demo2 : document.querySelector('#demo2')
    },
    events : {
        '#btnPause' : 'pause',
        '#btnPlay' : 'play',
        '#btnSlow' : 'slow',
        '#btnNormal' : 'normal',
        '#btnFast' : 'fast',
        '#btnRePlay' : 'replay'
    },
    n : 1,
    init:()=>{
        player.play()
        player.bindEvents()
        player.ui.demo.innerText =  string.substring(0,player.n)
        player.ui.demo2.innerHTML =  string.substring(0,player.n)
    },
    bindEvents: ()=>{
        for (let key in player.events){
            if(player.events.hasOwnProperty(key)){
                //如果是自身属性，不是继承属性
                const value = player.events[key]
                document.querySelector(key).onclick = player[value]
            }
        }
    },
    run : ()=>{
        player.n +=1
        if(player.n > string.length){
          window.clearInterval(player.id)
          return
        }
        player.ui.demo.innerText = string.substring(0,player.n)
        player.ui.demo2.innerHTML = string.substring(0,player.n)
        player.ui.demo.scrollTop = player.ui.demo.scrollHeight
     
    },
    play : ()=>{
        player.id = setInterval(player.run, player.time)
      },
    pause : ()=>{
          window.clearInterval(player.id)
      },
    slow : () =>{
          player.pause()
          player.time = 200
          player.play()
      },
      normal : ()=>{
        player.pause()
        player.time = 70
          player.play()
      },
      fast : ()=>{
        player.pause()
        player.time = 0
          player.play()
      },
      replay : ()=>{
        player.pause()
        player.time = 70
          player.play(player.n =0)
      }
}

player.init()




